// pages/edit-profile/edit-profile.js (或 .tsx)
import {View, Button, Text} from '@tarojs/components';

import NicknameInput from "@/components/NicknameInput";
import AvatarChooser from "@/components/AvatarChooser";
import Utils from "@/utils/common";
import {useRef} from "react";

import {updateUserApi, uploadFileApi} from "@/common/apis/home_datasource";
import GetPhoneButton from "@/components/get_phone_button";
import LocalUtils from "@/utils/local_utils";


function EditProfilePage() {

  const nickName = useRef();
  const avatar = useRef();
  const phone = useRef();

  const handleSave = async () => {
    if (Utils.isNotBlank(nickName.current) && Utils.isNotBlank(avatar.current) && Utils.isNotBlank(phone.current)) {
      const fileModel = await uploadFileApi(avatar.current)
      if (fileModel && fileModel.url) {
        const r = await updateUserApi({
          username: nickName.current,
          avatar: fileModel.url,
          mobile: phone.current,
          first: true
        })
        if (r) {
          LocalUtils.setUserinfo2(nickName.current, fileModel.url, phone.current)
          Utils.navigateBack()
        }
      }
    } else {
      Utils.showErrorToast('请填写完整信息')
    }
  };
  return (
    <View style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start', padding: '20PX'}}>
      <Text style={{fontSize: '20PX', fontWeight: 'bold', marginBottom: '20PX'}}>完善个人信息</Text>
      <NicknameInput nickeName={nickName}/>
      <AvatarChooser avatar={avatar}/>
      <GetPhoneButton phone={phone}/>
      <Button onClick={handleSave} type='primary' style={{marginTop: '50PX', width: '100%'}}>保存</Button>
    </View>
  );
}

export default EditProfilePage;
